import { ProFormDateTimePicker, ProFormSelect } from '@ant-design/pro-components';
import {
  DrawerForm,
  ProFormDigit,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Card, Col, Divider, Row } from 'antd';
import React from 'react';

type FormProps = {
  visible: boolean;
  current: API.ServerSupplierModel | undefined;
  onCancel: () => void;
  onSubmit: (values: API.ServerSupplierModel) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.ServerSupplierModel> = {
    sort: 1,
    status: true,
  };

  return (
    <DrawerForm<API.ServerSupplierModel>
      open={visible}
      initialValues={current ? current : defaultCurrent}
      title={`${current ? '编辑' : '添加'}服务器供应商`}
      autoFocusFirstInput
      width={800}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={11}>
          <ProFormText
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
            placeholder="请输入名称"
          />
        </Col>
        <Col span={6}>
          <ProFormText name="code" label="代码" />
        </Col>
        <Col span={4}>
          <ProFormDigit
            name="sort"
            label="排序"
            // wrapperCol={{ span: 4 }}
            min={0}
            max={9999}
            fieldProps={{ defaultValue: 0 }}
          />
        </Col>
        <Col span={3}>
          <ProFormSwitch
            name="status"
            label="状态"
            fieldProps={{
              defaultChecked: false,
            }}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
      <ProFormText name="url" label="网址" placeholder="请输入名称" />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea name="remark" label="备注" />
        </Col>
      </Row>
      
      <Card title="自动更换IP配置" style={{ margin: 0, padding: 0 }}>
      <Row gutter={24}>
        <Col span={8}>
          <ProFormText name={['configs', 'changeIpActionCode']} label="操作代码" />
        </Col>
        <Col span={8}>
          <ProFormDigit name={['configs', 'changeIpMaxTimes']} label="最大自动更换次数" min={0} max={500} />
        </Col>
        <Col span={8}>
          <ProFormDateTimePicker
            name={['configs', 'changeIpCheckIpBlacklistDeadline']}
            label="检查IP黑名单截止日期"
            fieldProps={{
              showTime: false,
              format: 'YYYY-MM-DD',
            }}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea name={['configs', 'changeIpActionUrl']} label="接口地址(多个回车分隔)" fieldProps={{rows:8}} />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormText name={['configs', 'changeIpAccessKey']} label="接口ID" />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormText name={['configs', 'changeIpAccessSecret']} label="接口密钥" />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormText name={['configs', 'changeIpProxy']} label="代理Proxy" />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
        </Col>
      </Row>
      </Card>


      
      
    </DrawerForm>
  );
};

export default Form;
